<template>
  <div class="main">
    <el-container style="height: 100%">
      <el-header class="header">
        <TitleHeader @updateDarkMode="receiveDarkMode" />
      </el-header>
      <el-main class="view">
        <GraphPanel :dark-mode="darkMode" />
      </el-main>
      <InfoFooter class="footer" />
    </el-container>
  </div>
</template>
<style scoped>
.main {
  margin: 0;
  height: 100vh;
}

.header {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0;
}

.view {
  /*占据整个父元素剩余的高度*/
  display: flex;
  width: 100%;
  height: calc(100% - 40px);
  padding: 0;
}

.footer {
  position: absolute;
  bottom: 2%;
  width: 100%;
  z-index: 2;
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'

import GraphPanel from '@/components/GraphPanel.vue'
import TitleHeader from '@/components/TitleHeader.vue'
import InfoFooter from '@/components/InfoFooter.vue'

const darkMode = ref(true)

const receiveDarkMode = (data) => {
  darkMode.value = data
}
</script>
